<template>
  <!-- 赛事或活动 添加 修改 -->
  <div v-loading="loading">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
      <el-form-item :label="mold=='match'?'赛事类型':'活动类型'" prop="type">
        <el-select v-model="ruleForm.type" placeholder="请选择类型" style="width:100%;">
          <el-option v-for="v,i in typeArr" :key="i" :label="v.name" :value="v.type"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="mold=='match'?'赛事名称':'活动名称'" prop="name">
        <el-input v-model="ruleForm.name" style="width:100%;"></el-input>
      </el-form-item>
      <el-form-item label="起止时间" required>
        <el-date-picker
          v-model="start_end_date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width:100%;"
          value-format="yyyy/MM/dd HH:mm:ss"
          format="yyyy/MM/dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
      <el-form-item :label="mold=='match'?'赛事地点':'活动地点'" prop="place">
        <el-cascader size="large" v-model="ruleForm.place" :options="AreaList" style="width:100%;"></el-cascader>
      </el-form-item>
      <el-form-item :label="mold=='match'?'赛事组别':'活动组别'" required>
        <template v-for="(v,i) in ruleForm.matchInfo">
          <el-input
            :key="'t'+i"
            v-model="v.name"
            style="width:calc(100% - 50px);margin-bottom:10px"
          ></el-input>
          <el-button
            :key="'a'+i"
            type="primary"
            icon="el-icon-plus"
            circle
            style="float:right"
            v-if="i==0"
            @click="ruleForm.matchInfo.push(JSON.parse(JSON.stringify({name:'',id:0})))"
          ></el-button>
          <el-button
            :key="'d'+i"
            type="danger"
            icon="el-icon-delete"
            circle
            style="float:right"
            v-else
            @click="ruleForm.matchInfo.splice(i,1)"
          ></el-button>
        </template>
      </el-form-item>
      <el-form-item :label="mold=='match'?'赛事规模':'活动规模'" prop="scale">
        <el-input v-model="ruleForm.scale" style="width:100%;"></el-input>
      </el-form-item>
      <el-form-item label="主办单位" prop="ponsor">
        <el-input v-model="ruleForm.ponsor" style="width:100%;"></el-input>
      </el-form-item>
      <el-form-item label="联合主办" prop="coSponsored">
        <el-input v-model="ruleForm.coSponsored" style="width:100%;"></el-input>
      </el-form-item>
      <el-form-item label="承办单位" prop="organizer">
        <el-input v-model="ruleForm.organizer" style="width:100%;"></el-input>
      </el-form-item>
      <!-- <el-form-item label="是否显示" prop="delivery">
        <el-switch v-model="ruleForm.delivery"></el-switch>
      </el-form-item>-->
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12">
          <el-form-item label="logo" required>
            <el-upload
              class="avatar-uploader"
              ref="upLogo"
              :action="upLoadUrl"
              :show-file-list="false"
              :on-success="(value)=> picSuccess(1, value)"
              :before-upload="(file)=> beforeUpload(1, file)"
              name="img"
            >
              <!-- 
              :auto-upload="false"-->
              <img v-if="ruleForm.logo" :src="ruleForm.logo" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span class="tips">注：请上传jpg格式，建议尺寸220*220 正方形</span>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="宣传图" required>
            <el-upload
              ref="upbanner"
              class="avatar-uploader"
              :action="upLoadUrl"
              :show-file-list="false"
              :on-success="(value)=> picSuccess(2, value)"
              :before-upload="(file)=> beforeUpload(2, file)"
              name="img"
            >
              <!-- :auto-upload="false" -->
              <img v-if="ruleForm.banner" :src="ruleForm.banner" class="avatar banner" />
              <i v-else class="el-icon-plus avatar-uploader-icon banner"></i>
            </el-upload>
            <span class="tips">注：请上传jpg格式，建议尺寸400*247 长方形</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 地区
import areaList from "../../assets/area.json";
export default {
  props: {
    AEShow: {
      type: Boolean,
    },
    mold: { type: String, value: "match" },
    typeArr: { type: Array },
  },
  data() {
    return {
      loading: false,
      AreaList: [],
      ruleForm: {
        orgId: "",
        type: "", //类型
        name: "", //名称
        matchDate: "", //开始时间
        matchEndDate: "", //结束时间
        place: "", //赛事地点 省市区
        matchInfo: [{ name: "", id: 0 }], // 组别
        scale: "", //规模
        ponsor: "", //主办单位
        coSponsored: "", //联合主办
        organizer: "", //承办单位
        operation:'',
        logo: "", //logo
        banner: "", //banner
        ifGradeAudit:1,
        timeAxis:0,
        timeAxisName:'',
        subjectColor:'rgba(22,201,93,1)',
        ifDelay:0,
        delayInfo:'',
        state:0,
        ifScan:0,
        ifUserScancard:0,
        conductCount:0,
        basicIntroduce:''
      },
      rules: {
        type: [{ required: true, message: "请选择类型", trigger: "change" }],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        // matchInfo:[{ type: 'array', required: true, message: '请至少添加一个组别',trigger: 'blur' }]
      },
      start_end_date: "",
      upLoadUrl: this.$url + "/sbr/match/uploadImg",
    };
  },
  methods: {
    close() {
      this.$emit("update:AEShow", false);
    },
    picSuccess(i, v) {
      if (i == 1) this.ruleForm.logo = v.data.filePath;
      else if (i == 2) this.ruleForm.banner = v.data.filePath;
    },
    beforeUpload(i, file) {
      // console.log(i, file)
      // if (i == 1 && this.ruleForm.logo) {
      //   let pp = this.ruleForm.logo.split("/");
      //   pp = this.$Base64.encode(pp[pp.length - 1]);
      //   this.$axios.get("/sbr/match/delImg?fileName=" + pp);
      // } else if (i == 2 && this.ruleForm.banner) {
      //   let pp = this.ruleForm.banner.split("/");
      //   pp = this.$Base64.encode(pp[pp.length - 1]);
      //   this.$axios.get("/sbr/match/delImg?fileName=" + pp);
      // }
      const isJPG = file.type === "image/jpeg";
      const isLt1M = file.size / 1024 / 1024 < 1;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 格式!");
      }
      if (!isLt1M) {
        this.$message.error("上传图片大小不能超过 1MB!");
      }
      return isJPG && isLt1M;
    },
    // 省市区选择
    getArea() {
      // 获取JSON省市地区
      let area = areaList.data;
      // console.log(area);
      area.forEach((d) => {
        let objA = {};
        objA.value = d.city_name;
        objA.label = d.city_name;
        if (d.cityArr) {
          objA.children = [];
          d.cityArr.forEach((v) => {
            let objB = {};
            objB.value = v.city_name;
            objB.label = v.city_name;
            if (v.areaArr && v.areaArr.length > 0) {
              objB.children = [];
              v.areaArr.forEach((r) => {
                let objC = {};
                objC.value = r.city_name;
                objC.label = r.city_name;
                objB.children.push(objC);
              });
            }
            objA.children.push(objB);
          });
        }
        this.AreaList.push(objA);
      });
      // console.log(this.AreaList);
    },
    // 保存
    save() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (!this.start_end_date) {
            this.$message.error("请设置起止时间");
            return false;
          }
          let mg = this.ruleForm.matchInfo.filter((v) => {
            return !v.name;
          });
          if (mg.length == this.ruleForm.matchInfo.length) {
            this.$message.error("请设置组别");
            return false;
          }
          if (!this.ruleForm.logo) {
            this.$message.error("请选择logo");
            return false;
          }
          if (!this.ruleForm.banner) {
            this.$message.error("请选择宣传图");
            return false;
          }
          this.ruleForm.matchDate = this.start_end_date[0];
          this.ruleForm.matchEndDate = this.start_end_date[1];
          if (this.ruleForm.place)
            this.ruleForm.place = this.ruleForm.place.join("/");
          this.ruleForm.matchInfo = this.ruleForm.matchInfo.filter((v) => {
            return v.name != "";
          });
          this.loading = true;
          // 提交
          // if (this.mold == "match") {
          // } else if (this.mold == "act") {
          //   this.addAct();
          // }
          let that = this;
          setTimeout(() => {
            that.addMA();
          }, 300);
        } else {
          // console.log("error submit!!");
          this.$message.error("请完善基本信息");
          return false;
        }
      });
    },
    // 提交 赛事 或 活动
    addMA() {
      this.ruleForm.state=0
      this.$axios.post("/sbr/match/putMatch", this.ruleForm).then((res) => {
        let rr = res.data.data;
        this.loading = false;
        this.$message.success("发布成功");
        this.$parent.$parent.getMA_arr();
        this.close();
      });
    },
  },
  created() {
    this.ruleForm.orgId = this.$orgId;
    this.getArea();
  },
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader >>> .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
.tips {
  font-size: 12px;
  float: left;
  line-height: 1.2;
}
.avatar-uploader.banner >>> .el-upload {
  height: 123px !important;
}
.banner {
  width: 200px !important;
  height: 123px !important;
  line-height: 123px !important;
}
</style>